odoo.define('excel_ledger.excel_field', function (require) {
    "use strict";
    var registry = require('web.field_registry');
    var core = require('web.core');
    var AbstractAction = require('web.AbstractAction');
    var ControlPanelMixin = require('web.ControlPanelMixin');
    var ajax = require('web.ajax');

    var excel_ledger = AbstractAction.extend(ControlPanelMixin, {

        cssLibs: [
//            '/web/static/lib/nvd3/nv.d3.css'
        ],
        jsLibs: [
            'https://cdn.jsdelivr.net/npm/vue/dist/vue.js',
        ],

        init: function(){
            this.table_data = {};
            this._super.apply(this, arguments);
        },

        on_attach_callback: function () {
            this.init_vue()
        },

        init_vue: function(){
            // 获取数据
            var self = this;
            this._rpc({
                model: 'play',
                method: 'get_data',
                args: [false],
                }).then(function (data) {
                    self.table_data = data;
                    var vm = new Vue({
                        el: '.excel_field',
                        data: {table_data: data},
                    });
                    odoo.vm = vm;
                })
        },

        register_component: function(){
            Vue.component('base-table', {
                props: ['header_datas', 'body_datas'],
                template: '<table>' +
                            '<thead><tr><th v-for="header_data in header_datas">{{header_data}}</th></tr></thead>' +
                            '<tbody><base-line v-for="(child_data, index) in body_datas" v-bind:tr_data="child_data"  v-bind:key="index"></base-line></tbody>'  +
                           '</table>'
            });

            Vue.component('base-line', {
                props: ['fold', 'tr_data'],
                methods:{
                    show_next: function(event){},
                },
                template: '<div>' +
                           '<tr class="top-vertical-align  o_js_account_report_inner_row">' +
                           '<td v-if="tr_data.children.length > 0" v-on:click="show_next"><i class="fa fa-caret-down" role="img" aria-label="展开" title="展开"></i></td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.name}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.date}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.note}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.partner_id}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.credit}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.debit}}</td>'+
                           '<td class="o_account_report_line date o_account_report_line_indent">{{tr_data.balance}}</td>'+
                           '</tr>' +
                           '<base-line v-for="(child_data, index) in tr_data.children" v-bind:tr_data="child_data"  v-bind:key="index"></base-line>' +
                           '</div>',
            });
        },

        willStart: function () {
            var self = this;
            return $.when(this._super.apply(this, arguments))
        },

        start: function(){
            var self = this;
            var res = this._super.apply(this, arguments).then(function(){
                self.register_component();
                self.render()
//                self.__parentedParent.on_attach_callback = self.init_vue.bind(self)
//                self.init_vue();
            });
        },

        render: function() {
            this.$el.html('<div class="excel_field"><base-table v-bind:header_datas="table_data.header" v-bind:body_datas="table_data.body"></base-table></div>');
        },
        reload: function() {},
        renderButtons: function() {},

    });

    core.action_registry.add('excel_ledger', excel_ledger);
    return excel_ledger
});



